<template>
  <v-overlay :value="loading">
      <v-row justify="center" align="center">
          <v-progress-circular :size="size"
          :width="width"
          :color="color"
          class="mb-4"
          indeterminate></v-progress-circular>
      </v-row>
      <v-row justify="center" align="center">
          <div class="body-2">{{text}}</div>
      </v-row>
  </v-overlay>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import {BtnCallback, Loading} from "../../types";

@Component
export default class VuetifyLoading extends Vue implements Loading {
    OnClose: BtnCallback | null = null;
    id = '';
    text = '加载中';
    loading = true;
    size = 100;
    width = 8;
    color='#fff'

    Close(): void {
        if (this.OnClose) {
            this.OnClose();
        }
        this.loading = false;
        this.RemoveElement();
    }

    RemoveElement(): void {
        this.$destroy();
        this.$el?.parentNode?.removeChild(this.$el);
    }
}
</script>
